<template>
<div class="layerRtb layerRtb-threecolumn layerRtb-right">
    <three-title :title="{name:'执行'}" :close="false">
        <span tag="i" class="rig_close fr" @click="$parent.$parent.clickFourShow()"></span>
    </three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "18">
        <div class="analyItem mt5">
            <p class="analyItemTit tx-center">执行人</p>
            <div class="analyItemCon clearfix">
                <div class="col-md-2 pr10">
                    <img v-if='executor.UserImageUrl' :src="executor.UserImageUrl" class="person-img">
                    <img alt="暂无图片信息" src="https://pa.rxjy.com/abc/images/timg.jpg" class="person-img" v-else>
                </div>
                <div class="col-md-8 lh28">
                    <p class="col-md-4">
                        <span class="cLightGray pr8">姓名</span>
                        <span v-if='executor.UserName' v-text='executor.UserName'></span>
                        <span v-else> - </span>
                    </p>
                    <p class="col-md-4"><span class="cLightGray pr8">卡号</span>
                        <span v-if='executor.UserCardNO' v-text='executor.UserCardNO'></span>
                        <span v-else> - </span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">年龄</span>
                        <span v-if='executor.Age' v-text="executor.Age+'岁'"></span>
                        <span v-else> - </span>
                    </p>
                    <p  class="col-md-4">
                        <span class="cLightGray pr8">工龄</span>
                        <span v-if='executor.WorkAge' v-text="executor.WorkAge+'月'"></span>
                        <span v-else> - </span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">入职</span>
                        <span v-if='executor.EntryTime' v-text='executor.EntryTime'></span>
                        <span v-else> - </span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">级别</span>
                        <span v-if='executor.Level' v-text='executor.Level'></span>
                        <span v-else> - </span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">部门</span>
                        <span v-if='executor.Dept' v-text='executor.Dept'></span>
                        <span v-else> - </span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">隶属</span>
                        <span v-if='executor.MemberOf' v-text='executor.MemberOf'></span>
                        <span v-else> - </span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">职务</span>
                        <span v-if='executor.Position' v-text='executor.Position'></span>
                        <span v-else> - </span>
                    </p>
                    <p class="col-md-4 hide">
                        <span class="cLightGray pr8">手机号</span>
                        <span v-if='executor.phone' v-text='executor.phone'></span>
                        <span v-else></span>
                    </p>
                </div>
                <div class="card-right col-md-2">
                    <img src="">
                </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">订单</p>
            <div class="analyItemCon">
                <div class="col-md-12 openBox1">
                     <p class="col-md-12">
                        <span class="cLightGray pr8">类型</span>
                        <span>{{orderDetail.typeName}}</span>
                    </p>
                    <p class="col-md-12">
                        <span class="cLightGray pr8">科目</span>
                        <span>{{orderDetail.subjectName}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">订单号</span>
                        <span class="c999999">{{orderDetail.orderNum}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">发起人</span>
                        <span class="c999999">{{orderDetail.projectId+' - '+orderDetail.initialCustomer}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">截止</span>
                        <span class="c999999 ">{{orderDetail.orderEnd}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">等级</span>
                        <span>{{orderDetail.orderLevel | SectionToChinese()}}级</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">罚款</span>
                        <span class="c999999 cRed bold">￥{{orderDetail.orderFine}}</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">积分</span>
                        <span class="c999999 cRed bold">{{orderDetail.orderIntegral}}</span>
                    </p>
                    <div class="col-md-11 ">
                        <span class="cLightGray pr8 fl mt5" style="width: 60px;">订单调整</span>
                        <div class="fl" style="width: calc(100% - 60px);">
                            <div v-for="(item, index) in orderDetail.criterionList" :key="index" class="col-md-12">
                                <span class="cLightGray pr8">{{item.criterionVersion | SectionToChinese()}}、{{item.changeRemark}}</span>
                                <p v-for="(it, index) in item.changeList" :key="index" class="col-md-12">
                                    <span>
                                        {{it.criterionTypeName}} - {{it.criterionSubjectName}} - {{it.criterionLevel| SectionToChinese()}}级
                                    </span>
                                    <span>
                                        罚款：
                                    </span>
                                    <span class="cRed bold">
                                            {{'￥'+it.criterionFine}}
                                    </span>
                                    <span>
                                        、积分
                                    </span>
                                    <span class="cRed bold">
                                        {{it.criterionIntegral}}
                                    </span>
                                    <span>
                                        、用时
                                    </span>
                                    <span class="bold">
                                        {{it.criterionTime+'天'}}
                                    </span>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>
                <strong data-title="倒计时" class="status-strong fz14" :class="{ cGreen: orderDetail.orderReckonByTime>0 , cRed: orderDetail.orderReckonByTime<0}">{{orderDetail.orderReckonByTime+'h'}}</strong>
                <div class="dis-il-block imgbox">
                    <a href="javascript:;" class="cBlue openBtn cur_edit" @click="openBox1($event)" data-num="1">展</a>
                </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">问题内容</p>
            <div class="analyItemCon">
                <div class="col-md-12 openBox">
                    <p class="col-md-11">
                        <span class="c999999">{{orderDetail.feedbackContent}}</span>
                    </p>
                </div>
                <div class="dis-il-block imgbox">
                    <a href="javascript:;" class="cBlue openBtn cur_edit" @click="openBox($event)" data-num="1">展</a>
                </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">问题图片</p>
            <div class="analyItemCon">
                <div class="col-md-12 openBox">
                    <p class="col-md-11">
                        <rx-viewer :images="orderDetail.spImgs" :options="{}">
                            <div style="float: left; padding: 5px 5px;" v-for="(item, index) in orderDetail.spImgs" :key="index">
                                <div class="look_imgHover relative" :style="elstyle50">
                                    <img :alt="item.fileName" :src="item.filePath | smallImg(elstyle50.width,elstyle50.height)">
                                    <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_link">
                                            <div class="dis-il-block">
                                                <a style="width: 25px;height: 25px;background-size : 100%;margin-top: 13px;"
                                                href="javascript:" class="ImgBtn enlarge_link enlarge_viewer"
                                                :data-src="item.filePath"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </rx-viewer>
                    </p>
                </div>
                <div class="dis-il-block imgbox">
                    <a href="javascript:;" class="cBlue openBtn cur_edit" @click="openBox($event)" data-num="1">展</a>
                </div>
            </div>
        </div>
        <!-- <div v-if="orderDetail.executeState=='0'&&orderDetail.orderState=='0'" class="analyItem">
            <p class="analyItemTit tx-center">处理内容</p>
            <div class="analyItemCon">
                <div class="col-md-12">
                    <p class="col-md-11">
                        <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="executeValue">
                        </el-input>
                    </p>
                </div>
            </div>
        </div> -->
        <!-- <div v-if="orderDetail.executeState=='0'&&orderDetail.orderState=='0'" class="analyItem">
            <p class="analyItemTit tx-center">处理附件</p>
            <div class="analyItemCon">
                <div class="col-md-12">
                    <div class="mt10" :class="{'mt10':imgList.length>1}" style="float: left;">
                        <rx-upload @success="successUploadImg" :data="{id: 11}" :init="{class: 2, mime: 1}"
                            :elStyle="elstyle56">
                            <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                                <a href="javascript:">
                                    <span type="file" value="" class="file"></span>
                                    <em class="bgIcon file-ico"></em>
                                </a>
                            </div>
                        </rx-upload>
                    </div>
                    <rx-viewer :images="imgList" :options="{}">
                        <div style="float: left; padding: 5px 5px;" v-for="(item, index) in imgList" :key="index">
                            <div class="look_imgHover relative" :style="elstyle50">
                                <img :alt="item.name" :src="item.filePath | smallImg(elstyle50.width,elstyle50.height)">
                                <div class="upload_finish_div">
                                    <div class="upload_finish_bg"></div>
                                    <div class="upload_finish_link">
                                        <div class="dis-il-block">
                                            <a style="width: 20px;height: 20px;background-size : 100%;margin-top: 13px;"
                                            href="javascript:" class="ImgBtn enlarge_link enlarge_viewer"
                                            :data-src="item.filePath"></a>
                                            <a style="width: 20px;height: 20px;background-size : 100%;background-position: 0 -19px;margin-top: 13px;"
                                            href="javascript:" class="ImgBtn delect_link"
                                            @click="deleteImg(index)"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </rx-viewer>
                </div>
            </div>
        </div> -->
        <div class="analyItem">
            <p class="analyItemTit tx-center">处理内容</p>
            <div class="analyItemCon">
                <div class="col-md-12 openBox">
                    <p class="col-md-11">
                        <span class="c999999">{{orderDetail.executeValue}}</span>
                    </p>
                </div>
                <div class="dis-il-block imgbox">
                    <a href="javascript:;" class="cBlue openBtn cur_edit" @click="openBox($event)" data-num="1">展</a>
                </div>
            </div>
        </div>
        <div  class="analyItem">
            <p class="analyItemTit tx-center">处理附件</p>
            <div class="analyItemCon">
                <div class="col-md-12 openBox">
                    <p class="col-md-11">
                        <rx-viewer :images="orderDetail.exIms" :options="{}">
                            <div style="float: left; padding: 5px 5px;" v-for="(item, index) in orderDetail.exIms" :key="index">
                                <div class="look_imgHover relative" :style="elstyle50">
                                    <img :alt="item.fileName" :src="item.filePath | smallImg(elstyle50.width,elstyle50.height)">
                                    <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_link">
                                            <div class="dis-il-block">
                                                <a style="width: 25px;height: 25px;background-size : 100%;margin-top: 13px;"
                                                href="javascript:" class="ImgBtn enlarge_link enlarge_viewer"
                                                :data-src="item.filePath"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </rx-viewer>
                    </p>
                </div>
                <div class="dis-il-block imgbox">
                    <a href="javascript:;" class="cBlue openBtn cur_edit" @click="openBox($event)" data-num="1">展</a>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
// import { getPMBusinessCardMsg, findSpSolveTheProblemDetailsById } from '../../../Resources/Api/customer'
export default {
    props: [ 'currentList', 'postData' ],
    data () {
        return {
            // 图片外层dom样式
            elstyle50: {
                width: '50px',
                height: '50px',
                display: 'inline-block'
            },
            // 图片外层dom样式
            elstyle56: {
                width: '60px',
                height: '50px',
                display: 'inline-block'
            },
            orderDetail: {},
            executor: [], // 外部人事
            // imgList: [], // 处理图片集合
            executeValue: '' // 处理内容
        }
    },
    mounted () {
        this.orderDetail = this.currentList
        this.executor = this.postData
    },
    computed: {
        ...mapGetters([ 'leftInfo', 'twoInfo', 'updateThree', 'otherInfo' ])
    },
    methods: {
        // findSpSolveTheProblemDetailsById (id) {
        //     findSpSolveTheProblemDetailsById({
        //         id: id
        //     }).then(results => {
        //         this.orderDetail = results.data.body
        //         if (this.orderDetail) {
        //             this.getPMBusinessCardMsg(this.orderDetail.personnelCard)
        //         }
        //     }).catch(error => { console.log(error) })
        // },
        // // 获取外部人事
        // getPMBusinessCardMsg (userCardNO) {
        //     if (!userCardNO) {
        //         this.executor = []
        //         return
        //     }
        //     getPMBusinessCardMsg({
        //         UserCardNO: userCardNO
        //     }).then(results => {
        //         this.executor = results.data.body
        //     }).catch(error => { console.log(error) })
        // },
        // 收展
        openBox1 (event) {
            if ($(event.target).attr('data-num') === '1') {
                $(event.target).parents('.analyItemCon').find('.openBox1').css({'height': 'auto'})
                $(event.target).attr('data-num', '2')
                $(event.target).html('收')
            } else {
                $(event.target).parents('.analyItemCon').find('.openBox1').css({'height': '110px'})
                $(event.target).attr('data-num', '1')
                $(event.target).html('展')
            }
        },
        // 收展
        openBox (event) {
            if ($(event.target).attr('data-num') === '1') {
                $(event.target).parents('.analyItemCon').find('.openBox').css({'height': 'auto'})
                let height = $(event.currentTarget).parents('.analyItemCon').find('.openBox').height()
                if (height < 38) {
                    $(event.currentTarget).parents('.analyItemCon').find('.openBox').height('60px')
                }
                $(event.target).attr('data-num', '2')
                $(event.target).html('收')
            } else {
                $(event.target).parents('.analyItemCon').find('.openBox').css({'height': '60px'})
                $(event.target).attr('data-num', '1')
                $(event.target).html('展')
            }
        }
        // // 上传图片方法
        // successUploadImg (data) {
        //     let param = {
        //         solveTheProblemId: this.leftInfo.id, // 订单编号
        //         imgType: '2', // 图片类型 1:客户问题 2：处理图片 3:客户评估 4：客服评估
        //         fileName: '处理图片', // 图片名称
        //         filePath: data.src// 图片地址
        //     }
        //     this.imgList.push(param)
        // },
        // // 删除图片方法
        // deleteImg (i) {
        //     this.imgList.splice(i, 1)
        // }
    },
    watch: {
        $router () {
            this.orderDetail = this.currentList
            this.executor = this.postData
        }
    },
    filters: {
        // 等级
        SectionToChinese (type) {
            let value = ''
            switch (type) {
            case 1:
                value = '一级'
                break
            case 2:
                value = '二级'
                break
            case 3:
                value = '三级'
                break
            default:
                break
            }
            return value
        }
    }
}
</script>
<style>
.status-strong {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -9px;
}
.person-img {
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    width: 65px;
    height: 65px;
    display: block;
    margin: 0 auto;
    margin-top: 8px;
}
</style>
<style scoped>
.openBox1 {
    height: 110px;
    overflow: hidden;
}
.imgbox {
    display: inline-block;
    position: absolute;
    top: 5px;
    right: 5px;
}
</style>
